<div class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header SMES-dialog handleLog-dialog" ng-init="init();"  style="background-color: #fafafa;">
    <div class="kmi-header-row">
        <div class="header-title" ng-bind="'B14.showDetail.title' | translate"></div>
        <div class="kmi-side-btn right" ng-click="dialog.back();">
            <img src="image/icons/clear.png"></img>
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-main-content" >
        <div class="kmi-layout-page">
            <!--上方資料欄-->
            <div class="kmi-text-fields">
                <label class="label" style="flex:1;" ng-bind="'B14.showDetail.package_serial_no' | translate"></label>
                <label class="value" ng-bind="dialog.item.box_no"></label>
                <label class="label" style="flex:1;" ng-bind="'B14.showDetail.package_serial_qty' | translate"></label>
                <label class="value" ng-bind="dialog.item.box_qty + '/' + dialog.item.actual_qty"></label>
            </div>
            <div class="kmi-text-fields">
                <label class="label" style="flex:1;" ng-bind="'B14.showDetail.product_no' | translate"></label>
                <label class="value" ng-bind="dialog.item.product_no"></label>
                <label class="label" style="flex:1;" ng-bind="'B14.showDetail.product_name' | translate"></label>
                <label class="value" ng-bind="dialog.item.product_name"></label>
            </div>
            <!--下方資料欄-->
            <div class="kmi-list">
                <!--header-->
                <div class="kmi-list__header">
                    <div class="kmi-list__column require" style="flex: 0 0 60px;" ng-bind="'B14.showDetail.seq' | translate"></div>
                    <div class="kmi-list__column require" style="flex:1;" ng-bind="'B14.showDetail.input_no' | translate"></div>
                    <div class="kmi-list__column require" style="flex:1;" ng-bind="'B14.showDetail.LotNo' | translate"></div>
                    <div class="kmi-list__column require" style="flex:1;" ng-bind="'B14.showDetail.qty' | translate"></div>
                </div>
                <!--content-->
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in dialog.getPages(dialog.itemList, dialog.PageConfig, dialog.filterItem) track by $index">
                        <div class="kmi-list__column column-border" style="flex: 0 0 60px;" ng-bind="item.Seq"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.InputNo"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.LotNo"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.Qty"></div>
                    </div>
                </div>
            </div>
            <div class="page-content">
                <div class="page-icon">
                    <img src="image/icons/dropleft.png"></img>
                    <div class="kmi-can-click" ng-click="dialog.PageConfig.page = (dialog.PageConfig.page-1<0?0:dialog.PageConfig.page-1);"></div>
                </div>
                <label ng-bind="(dialog.PageConfig.page +1)+' / '+dialog.PageConfig.total_page"></label>
                <div class="page-icon">
                    <img src="image/icons/dropright.png"></img>
                    <div class="kmi-can-click" ng-click="dialog.PageConfig.page = (dialog.PageConfig.page+1>(dialog.PageConfig.total_page-1)?(dialog.PageConfig.total_page-1):dialog.PageConfig.page+1);"></div>
                </div>
            </div>
            <div class="kmi-button kmi-button-confrim" ng-click="dialog.close()" style="width:100px;margin-left: 45.7%;">
                <label ng-bind="'B14.showDetail.close' | translate"></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>        
    </div>
</div>
